<template>
  <div class="publicLogin_container">
      <myHead></myHead>
      <div class="login_container">
        <div class="nav">
          <span>首页</span>
          >
          <span>我的</span>
          >
          <span>登录</span>
        </div>
        <div class="title">
          <ul>
            <li :class="style" @click="getStyle">普通登录</li>
            <li :class="removeStyle" @click="getStyle1">验证码快捷登录</li>
          </ul>
        </div>
        <div class="publicUserInfo" v-if="flag">
          <input type="text" placeholder="请输入手机号码">
          <input type="password" placeholder="请输入密码">
          <div class="bottom">
            <router-link to="/logined">立即登录</router-link>
            <!-- <a href="javascript:;">立即登录</a> -->
            <div class="res">
              <router-link to="/register" class="cur">立即注册</router-link>
              <router-link to="/findpassword">忘记密码</router-link>
              <!-- <a href="javascript:;" class="cur">立即注册</a> -->
              <!-- <a href="javascript:;">忘记密码</a> -->
            </div>
          </div>
        </div>
        <div class="verUserInfo" v-if="!flag">
          <div class="phone">
            <input type="text" placeholder="请输入手机号码">
            <button>发送验证码</button>
          </div>
          <input type="password" placeholder="请输入短信中的验证码">
          <div class="bottom">
            <a href="javascript:;">验证并登录</a>
            <div class="res">
              <router-link to="/register" class="cur">立即注册</router-link>
              <router-link to="/findpassword">忘记密码</router-link>
              <!-- <a href="javascript:;" class="cur">立即注册</a>
              <a href="javascript:;">忘记密码</a> -->
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import myHead from '@/components/myHead.vue'

export default {
  data () {
    return {
      removeStyle: '',
      style: 'current',
      flag: true
    }
  },
  methods: {
    getStyle () {
      this.style = 'current'
      this.removeStyle = ''
      this.flag = true
    },
    getStyle1 () {
      this.style = ''
      this.removeStyle = 'current'
      this.flag = false
    }
  },
  components: {
    myHead
  }
}
</script>

<style lang="less" scoped>
@color: #ff8a00;
@color1: #2f3130;
@vw: 3.20vw;
html {
  background-color: rgb(245, 245, 245);
}
.publicLogin_container{
    .login_container {
      .nav {
        background-color: #fff;
        height: (37/@vw);
        font-size: (12/@vw);
        padding-left: (16/@vw);
        border-bottom: 1px solid rgb(197, 197, 197);

        span {
          line-height: (37/@vw);

          &:first-child {
            font-weight: 700;
          }
        }
      }

      .title {
        background-color: #fff;
        height: (46/@vw);

        ul {
          display: flex;

          li {
            flex: 1;
            text-align: center;
            line-height: (46/@vw);
            font-size: (12/@vw);
            color: black;
            border-bottom: (4px/@vw) solid rgb(209, 209, 209);

            &.current {
              border-bottom: (4px/@vw) solid @color;
            }
          }
        }
      }

      .publicUserInfo {
        input {
          padding-left: (14/@vw);
          margin-top: 1px;
          width: 100%;
          height: (43/@vw);
          border: none;
          border-bottom: 1px solid rgb(197, 197, 197);
          outline: none;
          // &::placeholder{
          //   padding-left: (14/@vw);
          // }
        }

        .bottom {
          padding: 0px (10/@vw);
          margin-top: (14/@vw);

          >a {
            display: block;
            width: 100%;
            height: (48/@vw);
            background-color: @color;
            text-align: center;
            line-height: (48/@vw);
            color: #fff;
            font-size: (16/@vw);
          }

          .res {
            margin-top: (17/@vw);
            display: flex;
            justify-content: space-between;

            a {
              font-size: (12/@vw);
              color: rgb(102, 102, 102);

              &.cur {
                color: rgb(255, 138, 0);
              }
            }
          }
        }
      }

      .verUserInfo {
        .input {
          padding-left: (14/@vw);
          margin-top: 1px;
          width: 100%;
          height: (43/@vw);
          border: none;
          border-bottom: 1px solid rgb(197, 197, 197);
          outline: none;
        }

        .phone {
          position: relative;

          input {
            .input();
          }

          button {
            position: absolute;
            top: (6/@vw);
            right: (16/@vw);
            width: (82/@vw);
            height: (32/@vw);
            border: 1px solid rgb(220, 220, 220);
            background-color: #fff;
            font-size: (12/@vw)
          }
        }

        >input {
          .input();
        }

        .bottom {
          padding: 0px (10/@vw);
          margin-top: (14/@vw);

          >a {
            display: block;
            width: 100%;
            height: (48/@vw);
            background-color: @color;
            text-align: center;
            line-height: (48/@vw);
            color: #fff;
            font-size: (16/@vw);
          }

          .res {
            margin-top: (17/@vw);
            display: flex;
            justify-content: space-between;

            a {
              font-size: (12/@vw);
              color: rgb(102, 102, 102);

              &.cur {
                color: rgb(255, 138, 0);
              }
            }
          }
        }
      }
    }
}
</style>
